<template>
  <view class="writeoff-page" :data-theme="theme()" :class="theme() || ''">
    <view class="scan-section mt20">
      <button class="theme-btn sub-btn" type="primary" @click="scanQrcode">{{$t('writeoff.scan_verify')}}</button>
    </view>
    <!-- 门店筛选 -->
    <view class="filter-section">
      <picker @change="bindStoreChange" :value="store_index" :range="stores" range-key="storeName">
        <view class="picker-input">
          <text>{{$t('writeoff.current_store')}}：{{ stores[store_index].storeName }}</text>
          <text class="iconfont icon-jiantou"></text>
        </view>
      </picker>
    </view>
    <view class="record-list">
      <view v-if="records.length === 0 && !loading" class="empty">{{$t('writeoff.no_verify_record')}}</view>
      <view v-for="item in records" :key="item.id" class="record-card" @click="gotoDetail(item.orderId)">
        <view class="row"><text class="label">ID：</text><text>{{ item.id }}</text></view>
        <view class="row"><text class="label">{{$t('writeoff.verify_shop')}}：</text><text>{{ item.storeName }}</text></view>
        <view class="row"><text class="label">{{$t('writeoff.verifier')}}：</text><text>{{ item.realName }}</text></view>
        <view class="row"><text class="label">{{$t('writeoff.order_number')}}：</text><text>{{ item.orderNo }}</text></view>
        <view class="row"><text class="label">{{$t('writeoff.order_type')}}：</text><text>{{ item.orderTypeText }}</text></view>
        <view class="row"><text class="label">{{$t('writeoff.verify_time')}}：</text><text>{{ item.createTime }}</text></view>
      </view>
      <view v-if="loading" class="loading-text">{{$t('writeoff.loading')}}...</view>
      <view v-if="no_more && records.length > 0" class="no-more">{{$t('writeoff.no_more')}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stores: [
      ],
      store_index: 0,
      records: [],
      page: 1,
      list_rows: 10,
      last_page: 0,
      loading: false,
      no_more: false
    }
  },
  onLoad() {
    this.stores = [{ storeId: 0, storeName: this.$t('writeoff.all_stores') }];
    this.getStoreList();
  },
  onShow() {
    this.page = 1;
    this.records = [];
    this.no_more = false;
    this.getData();
  },
  onReachBottom() {
    if (this.page < this.last_page && !this.loading) {
      this.page++;
      this.getData();
    }
  },
  methods: {
    getStoreList() {
      this._supplier_post('store/store/index', {}, (res) => {
        this.stores = [{ storeId: 0, storeName: this.$t('writeoff.all_stores') }, ...res.data.records];
      }).catch(()=>{
         this.stores = [{ storeId: 0, storeName: this.$t('writeoff.all_stores') }];
      });
    },
    bindStoreChange(e) {
      this.store_index = e.detail.value;
      this.page = 1;
      this.records = [];
      this.no_more = false;
      this.getData();
    },
    scanQrcode() {
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          if (res.errMsg == "scanCode:ok" && res.result) {
            let result=JSON.parse(res.result)
            this.gotoPage('/pages/writeoff/detail?orderId=' + result.orderId);
          } else {
            uni.showToast({ title:this.$t('writeoff.scan_failed'), icon: 'none' });
          }
        }
      });
    },
    getData() {
      if (this.loading) return;
      this.loading = true;
      let params = {
        pageIndex: this.page,
        pageSize: this.list_rows
      };
      const selectedStoreId = this.stores[this.store_index].storeId;
      if (selectedStoreId > 0) {
        params.storeId = selectedStoreId;
      }

      this._supplier_post('store/order/index', params, (res) => {
        this.loading = false;
        this.records = this.records.concat(res.data.list.records);
        this.last_page = res.data.list.lastPage;
        if (this.page >= this.last_page) {
          this.no_more = true;
        }
      }, (err) => {
        this.loading = false;
      });
    },
    gotoDetail(orderId) {
      this.gotoPage('/pages/writeoff/detail?orderId=' + orderId);
    }
  }
}
</script>

<style lang="scss" scoped>
.writeoff-page {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 40rpx;
}

.header {
  padding: 40rpx 0 20rpx 0;
  text-align: center;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #222;
}

.scan-section {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.scan-btn {
  width: 80vw;
  height: 90rpx;
  font-size: 32rpx;
  border-radius: 45rpx;
  background: linear-gradient(90deg, #4b8cff, #357aff);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(75, 140, 255, 0.15);
}

.filter-section {
  background: #fff;
  padding: 24rpx;
  margin: 0 24rpx 24rpx;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.picker-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
}

.picker-input .icon-jiantou {
  font-size: 24rpx;
  color: #999;
}

.record-list {
  padding: 0 24rpx;
}

.empty {
  text-align: center;
  color: #aaa;
  margin-top: 60rpx;
  font-size: 28rpx;
}

.loading-text {
  text-align: center;
  color: #888;
  margin: 30rpx 0 10rpx 0;
  font-size: 28rpx;
}

.no-more {
  text-align: center;
  color: #bbb;
  margin: 30rpx 0 10rpx 0;
  font-size: 26rpx;
}

.record-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  padding: 28rpx 24rpx;
  margin-bottom: 24rpx;
}

.row {
  display: flex;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.label {
  color: #888;
  min-width: 120rpx;
}
</style>